<template>
<div class="home">
  <div class="date-box">
    <input type="date" v-model="date" class="dateInput">
  </div>
  <div class="box-card">
    <div class="card" :class="type==='sign'?'active1':''" @click="type='sign'">已签到({{sign}})</div>
    <div class="card" :class="type==='noSign'?'active':''" @click="type='noSign'">未签到({{noSign}})</div>
    <div class="card" :class="type==='vacation'?'active2':''" @click="type='vacation'">已请假({{vacation}})</div>
  </div>
  <div class="box-body">
    <div class="item">
      <span class="name">姓名</span>
      <span class="apartmentNum">公寓号</span>
      <span class="dormitoryNum">寝室号</span>
      <span class="bedNum">床号</span>
      <span class="btn" v-if="type === 'noSign'">操作</span>
    </div>
    <div v-if="list.length===0" style="text-align: center;margin-top:20px;">暂无人员</div>
    <div v-for="item in list" :key="item.id" class="item" style="margin-top:20px;">
      <span class="name">{{item.name}}</span>
      <span class="apartmentNum">{{item.apartmentNum}}</span>
      <span class="dormitoryNum">{{item.dormitoryNum}}</span>
      <span class="bedNum">{{item.bedNum}}</span>
      <span class="btn" v-if="type === 'noSign'"><button class="btn" @click="setVacation(item.id)">请假</button></span>
    </div>
  </div>
</div>
</template>

<script>
import {
  get,
  vacation
} from '@/assets/api/moudules/face'
export default {
  name: 'Home',
  data() {
    return {
      date: this.formatDate((new Date()), 'yyyy-MM-dd'),
      type: 'sign',
      sign: 0,
      noSign: 0,
      vacation: 0,
      signList: [],
      noSignList: [],
      vacationList: []
    }
  },
  computed: {
    list() {
      if (this.type === 'sign') {
        return this.signList
      } else if (this.type === 'noSign') {
        return this.noSignList
      } else {
        return this.vacationList
      }
    }
  },
  watch: {
    date(val) {
      console.log(val)
      this.getMessage()
    }
  },
  mounted() {
    this.getMessage()
  },
  methods: {
    getMessage() {
      get(this.date).then(res => {
        if (res.code === 200) {
          this.sign = res.data.sign
          this.noSign = res.data.noSign
          this.vacation = res.data.vacation
          this.signList = res.data.signList
          this.noSignList = res.data.noSignList
          this.vacationList = res.data.vacationList
        }
      })
    },
    setVacation(rid) {
      const time = this.date
      vacation({
        rid,
        time
      }).then(res => {
        console.log(res)
        if (res.code === 200) {
          this.getMessage()
        }
      })
    },
    formatDate(date, format) {
      var paddNum = function (num) {
        num += ''
        return num.replace(/^(\d)$/, '0$1')
      }
      var cfg = {
        yyyy: date.getFullYear(),
        yy: date.getFullYear().toString().substring(2),
        M: date.getMonth() + 1,
        MM: paddNum(date.getMonth() + 1),
        d: date.getDate(),
        dd: paddNum(date.getDate()),
        hh: date.getHours(),
        mm: date.getMinutes(),
        ss: date.getSeconds()
      }
      format || (format = 'yyyy-MM-dd hh:mm:ss')
      return format.replace(/([a-z])(\1)*/ig, function (m) {
        return cfg[m]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  font-size: $font-size-small;

  .date-box {
    width: 100%;
    padding: 10px 10px 0px 10px;

    .dateInput {
      width: 100%;
      height: 30px;
      border-radius: 5px;
      text-align: center;
      background-color: #fff;
      outline: none;
    }
  }

  .box-card {
    display: flex;
    padding: 10px 10px 0px 10px;

    .card {
      flex: 1;
      height: 50px;
      line-height: 50px;
      text-align: center;
      background-color: #fff;
      border-radius: 5px;
      transition: all .4s;

      &:nth-child(2) {
        margin: 0 10px;
      }
    }

    .active {
      background-color: #F56C6C;
      color: #fff;
    }

    .active1 {
      background-color: #409EFF;
      color: #fff;
    }

    .active2 {
      background-color: #67C23A;
      color: #fff;
    }
  }

  .box-body {
    margin: 10px;
    padding: 20px;
    border-radius: 5px;
    background-color: #fff;

    .item {
      display: flex;
      justify-content: space-around;

      .name {
        flex: 2;
        text-align: center;
      }

      .apartmentNum {
        flex: 2;
        text-align: center;
      }

      .dormitoryNum {
        flex: 2;
        text-align: center;
      }

      .bedNum {
        flex: 1;
        text-align: center;
      }

      .btn {
        flex: 1;
        height: 20px;
        text-align: center;
        font-size: $font-size-small;
      }
    }
  }
}
</style>
